<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<script src="js/jquery-3.5.0.js"></script>
		<script src="js/vue.js"></script>

		<!-- 		<div id="example">
			<div>{{message}}</div>
			<input v-model="message" type="text">
			<button @click="reverse">reverse</button>
		</div>

		<script>
			var vm = new Vue({
				el: '#example',
				data: {
					message: 'abc'
				},
				methods: {
					reverse() {
						this.message = this.message.split("").reverse().join("")
					}
				}
			})
		</script> -->

<!-- 		<div id="app">
			<todo-item v-for="item in items" :key="item.id" v-if="seen" :todo="item"></todo-item>
		</div>

		<script>
			Vue.component("todoItem", {
				props: ["todo"],
				template: "<li>{{ todo.test }}</li>"
			})

			var vm = new Vue({
				el: "#app",
				data: {
					seen: true,
					items: [{
							id: 1,
							test: "test1"
						},
						{
							id: 2,
							test: "test2"
						},
						{
							id: 3,
							test: "test3"
						}
					]
				}
			})
		</script> -->
		
		<div id="app">
		    <parent></parent>
		</div>
		
		<!--父组件-->
		<template id="parent">
		    <div>
		        <child :message="msg"></child>
		    </div>
		</template>
		
		<!--子组件-->
		<template id="child">
		    <div>
		        {{message}}    
		    </div>
		</template>
		
		<script>
			/*子组件*/
			Vue.component('child', {
			    template: '#child',
			    props: ['message']
			})
			
			/*建立Vue实例*/
			new Vue({
			    el: '#app',
			    data: {
			        msg: 'Hello'
			    },
			    /*父组件*/
			    components: {
			        'parent': {
			            template: '#parent',
			            data() {
			                return {
			                    msg: 'Hello'
			                }
			            }
			        }
			    }
			})
		</script>
	</body>
</html>